<template>
  <el-dialog
    class="audit-wrapper"
    :visible.sync="dv"
    width="30%"
    :title="auditTitle"
    :modal-append-to-body="true"
    :close-on-click-modal="false"
    :append-to-body="true"
    @closed="handleBeforeClosed"
  >
    <slot />
    <el-form ref="form" :model="auditForm" :rules="auditRules" style="margin-top: 8px;" label-width="50px">
      <el-form-item>
        <el-radio v-model="status" label="2">通过</el-radio>
        <el-radio v-model="status" label="3">拒绝</el-radio>
      </el-form-item>
      <el-form-item v-show="status === '3'" prop="reason">
        <el-input v-model="auditForm.reason" type="textarea" placeholder="请输入不通过原因" />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button size="small" @click="handleClickCancel">{{ $t('cancelText') }}</el-button>
      <el-button
        :loading="isSaveBtnLoading"
        size="small"
        type="primary"
        @click="handleClickSave"
      >提交
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateAudit } from '@/api/ips/audit'

export default {
  name: 'Audit',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    obj: {
      type: Object,
      default: () => {
      }
    },
    auditTitle: {
      type: String,
      default: '审核'
    },
    auditType: {
      type: String,
      default: ''
    }
  },
  data() {
    const reasonValidator = (rule, value, callback) => {
      if (this.status === '2') {
        callback()
      } else {
        const trimVal = value.trim()
        if (trimVal) {
          callback()
        } else {
          callback('请输入不通过原因')
        }
      }
    }
    return {
      auditForm: { reason: '' },
      auditRules: {
        reason: [{ validator: reasonValidator, trigger: 'blur' }]
      },
      status: '2',
      isSaveBtnLoading: false
    }
  },
  computed: {
    dv: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    // 点击保存
    handleClickSave() {
      if (this.status === '2') {
        this.auditForm.reason = ''
      }
      this.auditForm.auditNo = this.obj.id
      console.log(this.auditType)
      console.log(this.auditForm)
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isSaveBtnLoading = true
          updateAudit(this.auditType, this.auditForm.auditNo, this.status, this.auditForm.reason)
            .then(() => {
              this.$emit('refresh')
              this.$message.success(this.$t('operationSuccess'))
              this.isSaveBtnLoading = false
              this.dv = false
            })
            .catch(() => {
              this.isSaveBtnLoading = false
            })
        }
      })
    },
    // 点击取消
    handleClickCancel() {
      this.dv = false
    },
    // 关闭dialog前重置一些变量
    handleBeforeClosed() {
      this.status = '2'
      this.auditForm = {
        reason: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .audit-wrapper {
    /deep/ .el-dialog__body {
      .el-form {
        &:after {
          content: "";
          display: block;
          clear: both;
        }

        .el-radio {
          display: block;
          float: left;

          & + .el-form-item {
            float: left;
            width: calc(100% - 175px);
          }
        }
      }
    }
  }
</style>
